How To Display Code As Text


    How to display text as code

    <pre>
        <code>
            <p>type code here</p>
        </code>
    </pre>

Using Multiple Backgrounds

Seperate URLs by a comma

Background Repeat and Background Position will apply to all background images in order they appear. The sexy bikini girl will appear in the bottom right. The goth girl will appear on the left hand side. The gradiant will start on the left and go to the right. Multiple Backgrounds From Firefox


    body {
    background-image: url("sexy-bikini-girl-3.png"), url("mean-goth-girl.jpg"), linear-gradient(to right, blue / 100%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
    bottom right,
    left,
    right;
    }

Background Size

With a 1920 x 1920 px image you can make it appear as 300 x 300 px (or any other number) and it will automatically tile to fill your background.

Unless denoted otherwise, the background will automatically repeat to fill the space of the div. You can also stretch and distort the image with background-width and background-height.

You can also use background-size: cover; and background-size: contain; to resize as well.

Background Size from Mozilla

HTML


    <div class="tiledBackground"></div>

CSS


    .tiledBackground {
        background-image: url("sunshine-logo,png");
        background-size: 150px;
        width: 300px;
        height: 300px;
    }

    .coverBackground {
        background-image: url("band-cover-art.png");
        background-size: cover;
    }

    .containBackground {
        background-image: url("tupperware-container.png");
        background-size: contain;
    }